<template>
	<view v-if="jishiObject">
		<view>
			<view style="display:flex;padding:20rpx;justify-content: center;">
				<image mode="aspectFill" :src="jishiObject.worker.avatar"
					style="width:100%;height: 700rpx; border-radius:20rpx;background-color: antiquewhite;">
				</image>
			</view>
			<view class="u-p-l-20 u-m-t-10" style="display: flex;justify-content: space-between;align-items: center;">
				<view class="cflex-r" style="align-items: center;">
					<view style="font-size:36rpx;font-weight:bold;">{{jishiObject.worker.name}}</view>
					<view class="u-p-l-40">
						<image src="@/static/qieTu/daohang.png" mode="widthFix" style="width:28rpx;"></image>
						<text class="u-m-l-10">{{jishiObject.juLi}}</text>
					</view>
					<image :src="jishiObject.isLike===1?'../../static/qieTu/like.png':'../../static/qieTu/unlike.png'"
						mode="scaleToFill" style="width: 40rpx;height:40rpx;margin-left: 25rpx;" @tap="changeLike()">
				</view>
				<view class="u-font-12" style="background-color:rgb(255,219,201);color:rgb(255,125,11);
				padding:5rpx 25rpx;border-radius:25rpx 0rpx 0rpx 25rpx;">最早可约：{{jishiObject.zuiZao}}</view>
			</view>
			<!-- 以上为个人图片和姓名 -->
			<!-- <view class="cflex-r u-m-l-20 u-m-t-25" style="justify-content: space-between;">
				<view class="cflex-r" style="align-items: center;">
					<view>已服务：{{jishiObject.worker.num}}单</view>
					<view class='u-m-l-30 cflex-r' style="align-items:center;">
					
						<image :src="'../../static/star/smallStar'+jishiObject.worker.score+'.png'"
							style="width: 125rpx;" mode="widthFix" use-slot="false"></image>
						<view class="u-m-l-15">{{jishiObject.worker.score}}.0</view>
					</view>
				</view>
				<view class="cflex-r" style="position: relative;">
					<view style="background-color: rgb(255,190,11);width:47rpx;height:47rpx;
					padding:15rpx;border-radius:50%;position: absolute;left:-15rpx;
					display: flex;justify-content: center;align-items: center;">
						<image style="width:30rpx;height:30rpx;" mode="widthFix" src="@/static/qieTu/kefuwu_icon.png">
						</image>
					</view>
					<view style="background-color:rgb(255,241,201);color:rgb(255,187,0);
				padding:5rpx 25rpx 5rpx 50rpx; ">{{jishiObject.worker.status===0?'已休息':'可服务'}}</view>
				</view>
			</view> -->


			<!-- 以上为评分 -->
			<view class="cflex-r u-m-t-20" style="background-color:rgb(255,248,232);padding:20rpx;">
				<view class='u-m-r-65' style="color:rgb(203,153,126);">安心服务</view>
				<view class='u-m-r-65' style="color:rgb(203,153,126)">手机认证</view>
				<view style="color:rgb(203,153,126)">实名认证</view>
			</view>
			<view style="padding:15rpx 20rpx;" v-if="jishiObject.worker.des">
				<view :class="{'textCollapse':textIsCollapse.state,'textExpansion':!textIsCollapse.state}"
					style="line-height:50rpx;color:rgb(158,158,158);letter-spacing:2rpx;">
					<text v-show="jishiObject.worker.des!==''">{{jishiObject.worker.des}}</text>
				</view>
				<view @tap="changeState()" v-if="jishiObject.worker.des.length > 52" style="color:rgb(255,190,11);">
					{{textIsCollapse.txt}}</view>
			</view>
			<!-- 以上为安心服务和介绍 -->
		</view><!-- 以上整体为社工大图分段-->
		<!-- 以下为一段灰色分段 -->
		<view style="background-color:rgb(249,249,249);height:15rpx;width:100%;"></view>
		<view style="margin:20rpx 30rpx 20rpx 20rpx;" v-if="photoList.length > 0">
			<view class='cflex-r' style="justify-content: space-between;
			align-items: center;">
				<view class='cflex-r' style="align-items: center;">
					<image src="@/static/qieTu/shu.png" mode="heightFix" style="height:40rpx;"></image>
					<view class="u-m-l-10" style="font-weight: bold;">社工简介</view>
				</view>
				<view class="cflex-r" style="align-items: center;"  @tap="goJishiPhoto()">
					<text style="color:rgb(170,170,170)">全部{{photoList==''? 0 : photoList.length}}个视频/照片</text>
					<image class="u-m-l-10" style="width:18rpx;" mode="widthFix" src="@/static/qieTu/arrow-right.png">
					</image>
				</view>
			</view>
			<view class="cflex-r" style="padding:20rpx 0rpx;">
				<view class="" v-for="(photoItem,photoIndex) in photoList" :key="photoIndex">
					<image :class="{'u-m-r-26':(photoIndex+1)!==photoList.length}" mode="aspectFill"
						style="width:160rpx;height:160rpx;border-radius:5%;" :src="photoItem.url"
						v-if="photoItem.type=='image'">
					</image>
					<video :src="photoItem.url" v-if="photoItem.type=='video'" controls
						style="width: 160rpx;height: 180rpx;" id="videoId" @play="play"
						@fullscreenchange="fullscreenchange"></video>
				</view>
			</view>
		</view><!-- 以上整体为社工简介-->
		<view style="background-color:rgb(249,249,249);height:15rpx;width:100%;"></view>
		<view style="margin:20rpx">
			<view class='cflex-r' style="align-items: center;">
				<image src="@/static/qieTu/shu.png" mode="heightFix" style="height:40rpx;"></image>
				<view class="u-m-l-10" style="font-weight: bold;">提供项目</view>
			</view>
			<view class="cflex-r" style="padding:10rpx 10rpx 0rpx 0rpx;"
				v-for="(workerItem,workerIndex) in jishiObject.workerItemList" :key='workerIndex'>
				<view class="cflex-r" :style="{justifyContent:'space-between',width:'100%',
				alignItems:'center',padding:'20rpx 0 25rpx 0',
				borderBottom:(workerIndex+1)!==jishiObject.workerItemList.length?'1px solid rgb(230,230,230)':'none'}">
					<view class="cflex-r">
						<view>
							<image mode="aspectFill"
								style="width:200rpx;height:200rpx;vertical-align:bottom;border-radius:5%;"
								:src="workerItem.photo"></image>
						</view>
						<view class="cflex-c u-m-l-16">
							<view style="font-weight: bold;">{{workerItem.name}}</view>
							<view class="cflex-r u-m-t-22" style="align-items: center;">
								<view class="" style="font-weight: bold;color:rgb(251,133,0);">￥{{workerItem.finalPrice}}
								</view>
							</view>
							<view class="u-m-t-15 cflex-r">
								<view class="cflex-r" style="justify-content:flex-start;align-items: center;">
									<image style="width:25rpx;height:25rpx;display: block;" mode="widthFix"
										src="@/static/qieTu/time.png"></image>
									<view style="margin-left:-2rpx;transform:scale(0.9);color:rgb(102,102,102);">
										{{workerItem.timeSpan}}小时
									</view>
								</view>
								<view style="transform:scale(0.9);color:rgb(130,130,130);">90天已售{{workerItem.xiaoLiang}}
								</view>
							</view>
							<view class="u-m-t-24 cflex-r" style="justify-content: flex-start;">
								<!-- <view  style='border:1px solid rgb(170,170,170);padding:2rpx 15rpx;border-radius:8rpx;color:rgb(170,170,170);
								overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 220rpx;
								text-align: center;'>{{workerItem.itemDes}}</view> -->
								<!-- <view style='transform:scale(0.8);border:1px solid rgb(170,170,170);padding:2rpx 15rpx;border-radius:8rpx;color:rgb(170,170,170);'>价格合理</view> -->
							</view>
						</view>
					</view>
					<view @tap="goDetail(workerItem.id)" style="background-color:rgb(255,84,0);color:white;padding:8rpx 18rpx;
					border-radius:20rpx;transform: scale(0.9);">立即预约</view>
				</view>
			</view>
		</view><!-- 以上为提供项目版块-->
		<view style="background-color:rgb(249,249,249);height:15rpx;width:100%;"></view>
		<view style="margin:20rpx 30rpx 40rpx 20rpx;" @tap="goPinglun()">
			<view class='cflex-r' style="justify-content: space-between;
			align-items: center;">
				<view class='cflex-r' style="align-items: center;">
					<image src="@/static/qieTu/shu.png" mode="heightFix" style="height:40rpx;"></image>
					<view class="u-m-l-10" style="font-weight: bold;">
						精选评价（{{jishiObject.pingJiaList==''? 0 : jishiObject.pingJiaList.length}}）</view>
				</view>
				<view class="cflex-r" style="align-items: center;">
					<text style="color:rgb(170,170,170)">查看更多</text>
					<image class="u-m-l-10" style="width:16rpx;" mode="widthFix" src="@/static/qieTu/arrow-right.png">
					</image>
				</view>
			</view>
			<!-- 			<view class="cflex-r" style="padding:34rpx 20rpx 0rpx 26rpx;
			flex-wrap: wrap;">
				<view class="u-m-r-0 u-m-b-15" style="color:rgb(102,102,102);padding:4rpx 20rpx;border:1px solid rgb(102,102,102);
				border-radius:25rpx;transform: scale(0.9);" v-for="item in 7">服务规范 197</view>
			</view> -->
			<view v-for="(pingJiaItem,index) in jishiObject.pingJiaList" :key="index" :style="{padding:'30rpx 20rpx 26rpx 34rpx',
			borderBottom:(index+1)!==jishiObject.pingJiaList.length?'1px solid rgb(230,230,230)':'none'}">
				<view class="cflex-r" style="justify-content: space-between;">
					<view class="cflex-r">
						<image mode="aspectFill" :src="pingJiaItem.uAvatar"
							style="width:70rpx;height:74rpx;border-radius:50%;;"></image>
						<view class="cflex-c u-m-l-16">
							<view style="font-weight:600;">{{pingJiaItem.anonymity==1?"匿名用户":pingJiaItem.userName}}
							</view>
							<view class='cflex-r u-m-t-6' style="margin-left:-5rpx;align-items:center;">
								<image :src="'../../static/star/smallStar'+pingJiaItem.score+'.png'" mode="widthFix"
									style="width: 125rpx;" use-slot="false"></image>
							</view>
							<view class="u-m-t-30">{{pingJiaItem.content}}</view>
						</view>
					</view>
					<view style="color:rgb(170,170,170);margin-top:6rpx;">{{pingJiaItem.addtime}}</view>
				</view>
			</view>
			<view v-if="jishiObject.pingJiaList.length==0" style="padding:50rpx 0rpx;">
				<u-empty margin-top="50" icon-size="80" text="暂无精选评价" mode="list"></u-empty>
			</view>
		</view><!-- 以上为精选评价版块-->
	</view><!-- 最大的view -->
</template>
<script>
	export default {
		data() {
			return {
				textIsCollapse: {
					state: true,
					txt: "展开"
				},
				wid: null,
				jishiObject: null,
				photoList: [],
				videoContext:''
			}
		},
		onShow() {
			this.httpRequest()
		},
		onLoad(options) {
			this.wid = options.id; //存储计师id
		},
		computed: {

		},
		methods: {
			// 播放时进入全屏
			play(index) {
				this.videoContext = uni.createVideoContext('videoId')
				this.videoContext.requestFullScreen()
			},

			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId', this).pause();
				}
			},
			//退出全屏时停止
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
				}
			},
			banimg(arrs, ind) {
				let that = this 
				let arr = arrs
				let index = ind
				let i = 0
				let a = []
				fac()
				function fac() {
					if (i < arr.length) {
						wx.getImageInfo({
							src: arr[i].url,
							success: () => {
								let img = {
									type: 'image',
									url: arr[i].url,
								}
								a.unshift(img)
								i++
								return fac()
							},
							fail: () => {
								let video = {
									type: 'video',
									url: arr[i].url
								}
								a.push(video)
								i++
								return fac()

							},
							complete: () => {
								//这里是最终操作,把结果放到date里面什么的
								that.photoList  = a 
								console.log(that.photoList)
							}
						})
					}
				}
			},





			goDetail(goodsid) {
				let option = {
					goodsid: goodsid,
					jishiId: this.wid,
					zuiZao: this.jishiObject.zuiZao
				};
				uni.navigateTo({
					url: '../home/goods_detail?option=' + JSON.stringify(option)
				})
			},
			goJishiPhoto() {
				//console.log("goJishiPhoto",this.wid)
				uni.navigateTo({
					url: '../jishi/jishiPhoto?wid=' + this.wid
				})
			},
			goPinglun() {
				//console.log("goJishipingjia")
				uni.navigateTo({
					url: '../jishi/jishi_pingjia?wid=' + this.wid
				})
			},
			httpRequest() {
				let that = this
				this.$request("kehu/jishi/detail", {
					wid: this.wid
				}).then(res => {
					this.jishiObject = res.data;
					console.log(this.jishiObject);
					this.$request("kehu/jishi/photoList", {
						wid: this.wid
					}).then(res1 => {
						that.jishiObject.photoList = res1.data;
						that.photoList = res1.data
						that.banimg(that.photoList,that.photoList.length)
					});
				});
			},
			changeState() { //更改收起/展开状态
				this.textIsCollapse.txt = this.textIsCollapse.state ? "收起" : "展开";
				this.textIsCollapse.state = !this.textIsCollapse.state;
			},
			changeLike() {
				this.jishiObject.isLike = this.jishiObject.isLike === 1 ? 0 : 1;
				this.$request("kehu/other/likeWorker", {
					wid: this.wid
				}).then(res => {
					//console.log("like",res)
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	/* 以下为文字展开和收起样式 */
	.textExpansion {
		display: block;
	}

	.textCollapse {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		height: 110rpx;
	}
</style>